<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
</head>
<body>
<div id="c1"></div>
<div id="mountNode"></div>
<script>
      var data = {{ data | safe }};

      var chart = new G2.Chart({
        container: 'mountNode',
        forceFit: true,
        width: '600px'
      });
      chart.source(data, {
        percent: {
          formatter: function formatter(val) {
            val = (val * 100).toFixed(2) + '%';
            return val;
          }
        }
      });
      chart.coord('theta', {
        radius: 0.75
      });
      chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      chart.intervalStack().position('percent').color('item').label('percent', {
        formatter: function formatter(val, item) {
          return item.point.item + ': ' + val;
        }
      }).tooltip('item*count*percent', function(item, count, percent) {
        percent = (percent * 100).toFixed(2) + '%';
        return {
          name: item,
          value: count + '人'
        };
      }).style({
        lineWidth: 1,
        stroke: '#fff'
      });
      chart.render()
          var chart2 = new G2.Chart({
        container: 'c1',
        forceFit: true,
        width: '600px'
      });
      chart2.source(data, {
        percent: {
          formatter: function formatter(val) {
            val = (val * 100).toFixed(2) + '%';
            return val;
          }
        }
      });
      chart2.coord('theta', {
        radius: 0.75
      });
      chart2.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      chart2.intervalStack().position('percent').color('item').label('percent', {
        formatter: function formatter(val, item) {
          return item.point.item + ': ' + val;
        }
      }).tooltip('item*count*percent', function(item, count, percent) {
        percent = (percent * 100).toFixed(2) + '%';
        return {
          name: item,
          value: count + '人'
        };
      }).style({
        lineWidth: 1,
        stroke: '#fff'
      });
      chart2.render()
</script>
</body>
</html>